// 提交内容
<template>
<p>当需要用户输入内容时，可以使用 Prompt 类型的消息框。</p>
<p>调用 <code>ElMessageBox.prompt</code> 方法以打开 prompt 框。它模拟了系统的 <code>prompt</code>。 可以用 <code>inputPattern</code> 字段自己规定匹配模式， 使用 <code>inputValidator</code> 来指定验证方法，它应该返回 <code>Boolean</code> 或 <code>String</code>。 返回 <code>false</code> 或 <code>String</code> 表示验证失败， 返回的字符串将用作 <code>inputErrorMessage</code>，用来提示用户错误原因。 此外，可以用 <code>inputPlaceholder</code> 字段来定义输入框的占位符。</p>
  <el-button plain @click="open">Click to open Message Box</el-button>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.prompt('Please input your e-mail', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern:
      /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: 'Invalid Email',
  })
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `Your email is:${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Input canceled',
      })
    })
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>